<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>登录</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<style>
		*{margin: 0;padding: 0;-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;font-family: 微软雅黑,Arial;}
		body{

		}
		.container{
			background-image: url(切图/bg.png);
			height: 100vh;
			background-size: 100% 100%;
			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flex;
			display: -o-flex;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.box{
			width: 1000px;
			height: 500px;
			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flex;
			display: -o-flex;
			display: flex;
			flex-wrap:wrap;
			align-self: center;
			box-shadow: 0 0 50px #eee;
		}
		.box-left{
			flex: 2;
			padding: 0 50px;
			background-color: #ffffff;
		}
		.box-left h1{
			font-size: 50px;
			font-weight: normal;
			text-align: center;
			padding: 50px 0 30px;
		}
		.box-left input,.box-left button{
			outline: none;
			border: none;
		}
		.box-left input{
			width: 100%;
			margin: 20px 0 0;
			padding: 20px 10px 20px 50px;
			color: #999;
			border: 1px solid #eee;
			border-radius: 5px;
		}
		.box-left input:first-of-type{
			background: url(切图/yonghuming.png) no-repeat 20px center;
		}
		.box-left input:last-of-type{
			background: url(切图/mima.png) no-repeat 20px center;
		}
		.box-left input:focus{
			border-color:#999;
		}
		.box-left button{
			color: #ffffff;
			border:1px solid #7554bf;
			background-color: #7554bf;
			border-radius: 5px;
			width: 100%;
			padding: 15px 0;
			font-size: 20px;
			margin-top: 50px;
			cursor: pointer;
			transition: 0.4s;
		}
		.box-left button:active{
			background: white;
			color: #7554bf;
		}
		.box-right{
			flex: 1;
			display: block;
			background: url(切图/bg-login.png);
			background-size: 100% 100%;
			padding: 0 80px;
			color: white;
			text-decoration: none;
			position: relative;
			transition: 0.2s;
		}
		.box-right:hover{
			opacity:0.9;
		}
		.box-right p.txt-1{
			margin-top: 100px;
			margin-bottom: 80px;
		}
		.box-right p.txt-2{
			color: white;
			display: inline-block;
			background: url(切图/youjiantou.png) no-repeat right center;
			padding-right: 40px;
			padding-top: 10px;
			padding-bottom: 10px;
		}
		@media (max-width: 992px){
			.box-left,.box-right{
				flex: 0 0 100%;
				height: 500px;
			}
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="box">
			<div class="box-inner box-left">
				<h1>LOGO</h1>
				<form action="">
					<input type="text" placeholder="用户名或手机号" autofocus="autofocus">
					<input type="password" placeholder="请输入登陆密码">
					<button>登录</button>
				</form>
			</div>
			<a href="#" class="box-inner box-right">
				<p class="txt-1">企业注册及企业认领通道</p>
				<p class="txt-2">注册及认领</p>
			</a>
		</div>
	</div>
</body>
</html>